<template>
    <el-image v-loading="isLoading" v-bind="$attrs" v-on="$listeners" :src="imageUrl" :previewSrcList="imageList">
        <slot></slot>
    </el-image>
</template>
<script>
import request from '@/utils/request';
import axios from 'axios';
const CancelToken = axios.CancelToken;

export default {
    name: 'TheImage',
    props: {
        src: {
            type: String,
            default: ''
        },
        srcList: {
            type: Array,
            default: () => []
        },
        uuid: {
            type: String,
            required: false
        },
        queueManager: {
            type: Object,
            required: false
            // default: () => ({push: () => Promise.resolve()})
        }
    },
    data() {
        return {
            isLoading: true,
            imageUrl: ''
            // previewImageList: []
        };
    },
    computed: {
        imageList: {
            get() {
                return this.srcList;
            },
            set(value) {
                this.$emit('update:srcList', value);
            }
        }
    },
    watch: {
        src: {
            handler(newVal, oldVal) {
                if (newVal && newVal && newVal === oldVal) {
                    return;
                }
                this.isLoading = true;
                let handler;
                if (this.uuid && this.queueManager) {
                    const custom = CancelToken.source();

                    handler = this.queueManager.push({
                        uuid: this.uuid,
                        custom: custom,
                        fetch: request.bind(this, {
                            method: 'get',
                            url: newVal,
                            responseType: 'blob',
                            // responseType: 'arraybuffer',
                            cancelToken: custom.token
                        })
                    });
                } else {
                    handler = request({method: 'get', url: newVal, responseType: 'blob'});
                    // handler = request({method: 'get', url: newVal, responseType: 'arraybuffer'});
                }
                handler
                    .then(response => {
                        const mimeType = response.headers['content-type'].toLowerCase();
                        // const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');
                        // this.imageUrl = 'data:' + mimeType + ';base64,' + imgBase64;
                        const blob = new Blob([response.data], {type: mimeType});
                        this.imageUrl = window.URL.createObjectURL(blob);

                        const imageList = [...this.imageList, this.imageUrl];
                        this.imageList = [...new Set(imageList)];
                    })
                    .catch(error => {
                        console.error('error :>> ', error);
                        this.imageUrl = newVal;
                    })
                    .finally(() => {
                        this.isLoading = false;
                    });
            },
            immediate: true,
            deep: true
        }
        // srcList: {
        //     handler(values, oldVal) {
        //         for (const newVal of values) {
        //             request({method: 'get', url: newVal, responseType: 'arraybuffer'})
        //                 .then(response => {
        //                     const mimeType = response.headers['content-type'].toLowerCase();
        //                     const imgBase64 = Buffer.from(response.data, 'binary').toString('base64');

        //                     const imageUrl = 'data:' + mimeType + ';base64,' + imgBase64;
        //                     this.previewImageList.push(imageUrl);
        //                 })
        //                 .catch(error => {
        //                     console.error('error :>> ', error);
        //                 });
        //         }
        //     },
        //     immediate: true,
        //     deep: true
        // }
    },
    method: {}
};
</script>
<style lang="scss" scoped>
::v-deep {
    .el-image__inner.el-image__preview {
        object-position: inherit;
    }
}
</style>
